<template>
  <div class="app-container">
    <el-table  v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">

      <el-table-column label="教师ID" prop="id" align="center" width="180px" >
        <template slot-scope="scope">
          <span>{{ scope.row.aluId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户ID" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.authName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="姓名" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="性别" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.gender }}</span>
        </template>
      </el-table-column>

      <el-table-column label="生日" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.birthday | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.enableStatus | statusStyleFilter">
            {{ row.enableStatus | statusNameFilter }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <el-button v-if="row.enableStatus!='1'" size="small" type="success" @click="handleModifyStatus(row,'0')">
            确认绑定
          </el-button>
          <el-button v-if="row.enableStatus!='0'" size="small"  type="warning" @click="handleModifyStatus(row,'1')">
            取消绑定
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
  import { fetchAlumniList, fetchAlumniInfo, updateAlumniInfo } from '@/api/alumni'
  import Pagination from '@/components/Pagination/index'
  import { parseTime } from '@/utils'

  export default {
    name: 'alumniList',
    components: { Pagination },
    filters: {
      statusStyleFilter(status) {
        const statusMap = {
          "1": 'success',
          "0": 'danger'
        }
        return statusMap[status]
      },
      statusNameFilter(status) {
        const statusMap = {
          "1": "已绑定",
          "0": "代审核"
        }
        return statusMap[status]
      }
    },

    data() {
      return {
        tableKey: 0,
        selectedList: 0,
        defaultForm: null,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },

    created() {
      this.getList()
    },

    methods:{
      async getList(){
        this.listLoading = true
        await fetchAlumniList((this.listQuery)).then(response =>{
          this.list = response.data.list
          this.listLoading = false
          // console.log(this.list)
        }).catch(err => {
          console.log(err)
        })
      },

      fetchInfoById(data,id) {
        fetchAlumniInfo().then(response => {
          data = response.data
        }).catch(err => {
          console.log(err)
        })
      },

      handleModifyStatus(row, status) {
        this.defaultForm=row
        let aData = new Date();
        this.$set(this.defaultForm,'lastEditTime',parseTime(aData))
        if(status === '0'){ this.defaultForm.enableStatus = '1' }
        else{ this.defaultForm.enableStatus = '0' }
        updateAlumniInfo(this.defaultForm).then(response =>{
          row = response.data
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }).catch(err => {
          console.log(err)
        })
      },


    }
  }
</script>


<style scoped>

</style>
